<template>
  <div class="order-data-item">
    <div class="row" style="display: flex;align-items: center;margin-bottom: 12px" v-if="state.orderData.type != 2">
      <div class="type">
        {{ store.bctypeLabel(order.bc_type) }}
        <!-- {{ platformObj[order.bc_type].name }} -->
      </div>
      <app-flex style="margin-bottom: 4px;display: flex;align-items: center;">
        <span class="club">{{ order.direction == 'zheng' ? order.pk_odds_key_ch : order.reverse_pk_odds_key_ch }}</span>
        <!-- <span class="club" v-if="oddskeych.afterColon != ''">:</span>
        <span class="club" style="color: #ae8328">{{ oddskeych.afterColon }}</span> -->
        <div style="margin: 0 4px; font-size: 14px; font-weight: bold" v-if="state.orderData.type == 0">@</div>
        <div style="color: #f83e3e" v-if="state.orderData.type == 0">{{ order.direction == 'zheng' ? order.odd :
          order.reverse_odd }}</div>

        <template v-if="order.reservation == 1">
          <div style="margin: 0 4px; font-size: 14px; font-weight: bold">@</div>
          <div style="color: #f83e3e">{{ order.min_odd }} - {{ order.max_odd }}</div>
        </template>

        <div style="margin-left: 12px" v-if="state.schemeActive.type == 1 && !order.pk_odds_key.includes('M')">
          <el-select v-model="order.direction" placeholder="下单方向" @change="changedirection"
            style="width: 90px;height: 28px">
            <el-option label="正向" value="zheng" />
            <el-option label="反向" value="fan" />
          </el-select>
        </div>
      </app-flex>
    </div>
    <div class="row">
      <div class="account" v-if="state.orderData.type != 2">
        <el-select v-model="order.userId" placeholder="选择账号" @focus="focususerId" @change="handleUserChange">
          <el-option v-for="item in users" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="account" v-if="state.orderData.type == 2">
        <el-select v-model="order.bc_type" placeholder="选择平台" disabled class="he28"
          style="width: 116px; height: 28px; margin-bottom: 8px">
          <el-option v-for="(value, key) in platformObj" :key="key" :label="value.name" :value="key" />
        </el-select>
      </div>

      <template v-if="state.orderData.type == 0">
        <span class="label">总金额：</span>
        <el-input v-model="order.reservation_stake" class="orderpriceinput" style="width: 78px" type="number" />
      </template>
      <template v-if="state.orderData.type == 1">
        <template v-if="order.reservation_stake_type == 'max'">总金额：最大限额</template>
        <template v-else-if="order.reservation_stake_type == 'min'">总金额：最小限额 </template>
        <template v-else-if="order.stake">
          总金额：{{ order.stake }}
          <!-- <span class="label" style="margin-right: 8px"></span> -->
          <!-- <el-input v-model="order.stake" style="width: 88px; margin-right: 8px" type="number" /> -->
        </template>
      </template>
      <template v-if="state.orderData.type == 2">
        <span class="label" style="margin-bottom: 8px">总金额：</span>
        <el-input v-model="order.stake" class="orderpriceinput" style="width: 88px; height: 28px; margin-bottom: 8px"
          type="number" />
      </template>
      <template v-if="state.orderData.type == 2">
        <span class="label" style="margin-bottom: 8px">赔率：</span>
        <el-input v-model="order.odd" class="orderpriceinput" style="width: 88px; height: 28px; margin-bottom: 8px"
          type="number" />
      </template>

      <span v-if="order.max_stake">（{{ order.min_stake }}-{{ order.max_stake }}）</span>
    </div>
    <div class="row" style="margin-top: 8px">
      <div class="account">
        <!-- @change="store.changeOrdermode(order)" -->
        <el-select v-model="order.order_mode" @change="store.changeOrdermode(order)" placeholder="订单模式">
          <el-option label="单账号" value="one_user" />
          <el-option label="多账号" value="all_user" />
          <!-- <el-option label="指定账号数量" value="count_user" /> -->
        </el-select>
      </div>
      <div class="account">
        <el-select v-model="order.place_mode" placeholder="下单模式">
          <el-option label="依次下单" :value="0" />
          <el-option v-if="order.order_mode == 'all_user'" label="同时下单" :value="1" />
          <el-option v-if="state.orderData.match.sport_type == 'basketball' && order.order_mode == 'all_user'"
            label="循环下单" :value="2" />
        </el-select>
      </div>
      <div class="account">
        <el-select v-model="order.runtime" placeholder="超时">
          <el-option v-for="item in overtimeList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    <div class="row" style="margin-top: 8px; display: flex; align-items: flex-start">
      <div class="account" v-if="order.place_mode == '0'">
        <el-input-number v-model="order.order_second" placeholder="间隔时间" :controls="false" style="width: 115px">
          <template #suffix>
            <div class="el-input__icon">秒</div>
          </template>
        </el-input-number>
      </div>
    </div>

    <div class="subscribe" @click="handleSubscribe" v-if="state.orderData.type == 1">
      <template v-if="order.checked">
        <div class="subscribe-button subscribe-button__detail" v-if="order.reservation == 1"
          @click="store.showSubscribe(order)">
          查看预约
        </div>
        <div class="subscribe-button" v-else @click="store.showSubscribe(order)">预约</div>
      </template>
      <template v-else>
        <div class="subscribe-button subscribe-button__disabled">预约</div>
      </template>
    </div>
    <div class="checkbox">
      <el-checkbox v-model="order.checked" />
    </div>
  </div>
</template>
<script setup>
import { getMoneyLimit } from '@/api/user'
import { http } from '@/utils/http'
const { state, store } = inject('Home')
// const { platformObj } = inject('/board')
const platformObj = ref({})
const overtimeList = ref([
  {
    value: -1,
    label: '持续打单',
  },
  {
    value: -2,
    label: '关盘停止',
  },
  {
    value: -3,
    label: '赛前',
  },
  {
    value: -4,
    label: '赛中',
  },
  {
    value: -5,
    label: '赛前+赛中',
  },
  {
    value: 5,
    label: '5s停止',
  },
  {
    value: 10,
    label: '10s停止',
  },
  {
    value: 20,
    label: '20s停止',
  },
  {
    value: 30,
    label: '30s停止',
  },
  {
    value: 60,
    label: '1min停止',
  },
  {
    value: 120,
    label: '2min停止',
  },
  {
    value: 300,
    label: '5min停止',
  },
  {
    value: 600,
    label: '10min停止',
  },
  {
    value: 900,
    label: '15min停止',
  },
  {
    value: 1200,
    label: '20min停止',
  },
  {
    value: 2400,
    label: '30min停止',
  },
])

const props = defineProps({
  order: Object,
})

// 切换账号，重置选中用户
watch(
  () => state.userId,
  () => {
    props.order.userId = null
  }
)

const users = computed(() => {
  const arr = []
  console.log(props.order);
  console.log(state.platformUsers);


  if (state.platformUsers != null && state.platformUsers[props.order.bc_type] != null && state.platformUsers[props.order.bc_type] != undefined) {
    state.platformUsers[props.order.bc_type].forEach(item => {
      let label = item.user_name
      arr.push({
        ...item,
        label: label,
        value: item.user_value.id,
      })
    })

    if (arr.length > 0 && props.order.userId == undefined) {
      props.order.userId = arr[0].user_value.id
    }
  }
  // if (state.platformUsers != null) {
  //   console.log(state.platformUsers);

  //   state.platformUsers.forEach(item => {
  //     let label
  //     if (item.now_amount != '') {
  //       label = item.user_name
  //     } else {
  //       label = item.user_name
  //     }
  //     arr.push({
  //       ...item,
  //       label: label,
  //       value: item.id,
  //     })
  //   })
  //   // console.log(props.order.userId)

  //   if (arr.length > 0 && props.order.userId == undefined) {
  //     props.order.userId = arr[0].id
  //   }
  // }

  return arr
})

const oddskeych = computed(() => {
  let pk_odds_key = props.order.pk_odds_key
  let betweenColons = pk_odds_key.split(':')
  let targetChars = ['R', 'M', 'OU']
  const indices = betweenColons.reduce((acc, currentElement, index) => {
    if (targetChars.includes(currentElement)) {
      acc.push(index)
    }

    return acc
  }, [])
  let result = extractContentByColonIndex(props.order.pk_odds_key_ch, indices[0] + 1)

  return result
})

const extractContentByColonIndex = (str, colonIndex) => {
  // 找到指定冒号的位置
  let colonCount = 0
  let colonPosition = -1

  for (let i = 0; i < str.length; i++) {
    if (str[i] === ':') {
      colonCount++
      if (colonCount === colonIndex) {
        colonPosition = i
        break
      }
    }
  }

  if (colonPosition !== -1) {
    // 截取指定冒号之前的内容
    const beforeColon = str.substring(0, colonPosition).trim()

    // 截取指定冒号之后的内容
    const afterColon = str.substring(colonPosition + 1).trim()

    return { beforeColon, afterColon }
  } else {
    return { beforeColon: str, afterColon: '' } // 或者可以抛出错误或者其他提示
  }
}

// 选择用户，获取用户对应金额限制
const handleUserChange = () => {
  const { order } = props

  order.user = users.value.find(item => item.value == order.userId)

  store.getOrderInfo(order)
}

const focususerId = () => {
  state.activecheckuserOrder = props.order
  if (props.order.userId == 'all') {
    state.checkuserAll = true
    state.radiouser = ''
  } else {
    state.checkuserAll = false
    state.radiouser = props.order.userId
  }

  state.userdialogshow = true
}

const changedirection = () => {
  console.log(props.order);
  const { orderData, userId } = state
  const { match } = orderData
  console.log(match);
  console.log(props.order.pk_odds_key.includes('M'));
  
  if (props.order.pk_odds_key.includes('M')) {

  } else {
    http
      .post(`/match/other_platform_odd_list`, {
        bc_type: props.order.bc_type,
        league_id: props.order.league_id,
        home_id: props.order.home_id,
        away_id: props.order.away_id,
        pk_odds_key: props.order.direction == 'zheng' ? props.order.pk_odds_key : props.order.reverse_pk_odds_key,
        event_type: match.event_type,
        sport_type: match.sport_type
        //   nav_data: item.nav_data,
        //   odd: item.odd,
      })
      .then(res => {

        res.data.forEach(item => {
          if (item.bc_type == props.order.bc_type) {
            if (props.order.direction == 'fan') {
              props.order.reverse_odd = item.odd
              props.order.reverse_nav_data = item.nav_data
            } else {
              props.order.odd = item.odd
              props.order.nav_data = item.nav_data
            }



          }
        });


      })

  }

}
</script>
<style lang="scss" scoped>
.order-data-item {
  padding-left: 40px;
  margin-bottom: 16px;
  position: relative;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.type {
  color: #282828;
  width: 116px;
  margin-right: 16px;
}

.account {
  width: 116px;
  margin-right: 16px;
}

.club {
  color: #282828;
  font-weight: 600;
}

.label {
  // color: #778090;
  margin-left: 8px;
  font-family: PingFangSC;
  font-size: 14px;
  color: #778090;
}

.subscribe {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -16px;
  text-align: center;
}

.subscribe-button {
  width: 60px;
  line-height: 32px;
  text-align: center;
  border-radius: 4px;
  background-color: var(--primary);
  color: #fff;
  cursor: pointer;
}

.subscribe-button__disabled {
  opacity: 0.3;
  // 禁用
  cursor: not-allowed;
}

.subscribe-button__detail {
  background: none;
  color: var(--primary);
}

.checkbox {
  position: absolute;
  top: 0;
  left: 16px;
}

::v-deep .account .el-select__selected-item {
  font-size: 12px;
}

::v-deep .orderpriceinput .el-input__inner {
  font-size: 14px;
  font-weight: bold;
  color: #252a30;
}

::v-deep .he28 .el-select__wrapper {
  min-height: 28px;
}
</style>
